<template>
  <van-row>
    <div class="bodyStyle">
      <router-view />
    </div>
    <van-tabbar v-model="active" placeholder @change="bottomClick">
      <van-tabbar-item name="quickActions" to="/quickActions" icon="wap-home-o">主页</van-tabbar-item>
      <van-tabbar-item name="statistics" to="/statistics" icon="user-o">图表</van-tabbar-item>
      <van-tabbar-item name="user" to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </van-row>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      // active: this.$store.getters.active || sessionStorage.active,
      active: this.$store.getters.active,
      title: '快捷操作',
      unReadCount: ''
    }
  },
  watch: {
    active(nw, old) {
      if (nw === 'quickActions') {
        this.title = '快捷操作'
      } else if (nw === 'message') {
        this.title = '信息'
      } else {
        this.title = '我的'
      }
    }
  },
  created() {
    this.$store.dispatch('app/setActive', 'quickActions')
  },
  methods: {
    bottomClick(active) {
      this.$store.dispatch('app/setActive', active)
    }
  }
}
</script>

<style>
    .bodyStyle {
        width: 100%;
        display: block;
        position: relative;
    }

    .bodyStyle:after {
        width: 100%;
        display: block;
        background-size: cover;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        -webkit-filter: blur(5px);
        filter: blur(px);
    }
</style>
